<template>
  <div>
    <a-modal :width="800" title="添加字段，如果同名就更新字段" v-model="visible" @ok="save">
      <div class="mb10 flex-s wfull">
        <a-button class="mr10" @click="initTreeTable">树字段</a-button>
        <a-button class="mr10" @click="initDemoTable">Demo字段</a-button>
      </div>
      <table class="table-column">
        <tr v-for="(col,index) in columns" :key="`col${index}`">
          <td><div class="w120"><a-input placeholder="字段名称" v-model.trim="col.name"></a-input></div></td>
          <td>
            <a-select class="w120" v-model="col.type">
              <a-select-option v-for="t in columnTypeArr" :key="`sel${t.key}`" :value="t.key">
                {{ t.value }}
              </a-select-option>
            </a-select>
          </td>
          <td>
            <div class="w160"><a-input placeholder="备注信息" v-model.trim="col.comment"></a-input></div>
          </td>
          <td>
            <div class="btn-circle" @click="addColumn(col)">
              <i class="fa fa-plus"></i>
            </div>
            <div class="btn-circle" @click="delColumn(col)">
              <i class="fa fa-trash"></i>
            </div>
          </td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      columnTypeArr: [
        { key: 'long', value: '长整数' },
        { key: 'int', value: '整数' },
        { key: 'double', value: '浮点数' },
        { key: 'string', value: '字符串' },
        { key: 'boolean', value: '布尔值' },
        { key: 'text', value: '长文本' },
        { key: 'date', value: '日期' },
        { key: 'datetime', value: '日期时间' },
        { key: 'time', value: '时间' }
      ],
      columns: [
        { name: 'test', type: 'string', comment: '测试' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    show () {
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    save () {
      const names = []
      for (let i = 0; i < this.columns.length; i++) {
        const name = this.columns[i].name
        if (names.includes(name)) {
          this.$warning({ title: '第' + (i + 1) + '个字段名称重复' })
          return
        }
        names.push(name)
        if (name.length === 0) {
          this.$warning({ title: '第' + (i + 1) + '个字段名称为空' })
          return
        }
      }
      const data = JSON.stringify(this.columns)
      this.$emit('save', data)
    },
    addColumn (col) {
      const index = this.columns.indexOf(col)
      this.columns.splice(index + 1, 0, { name: '', type: 'string', comment: '' })
    },
    delColumn (col) {
      if (this.columns.length === 1) {
        this.$warning({ title: '至少保留一个字段' })
        return
      }
      const index = this.columns.indexOf(col)
      this.columns.splice(index, 1)
    },
    initTreeTable () {
      this.columns = [
        { name: 'name', type: 'string', comment: '名称' },
        { name: 'code', type: 'string', comment: '编码' },
        { name: 'pid', type: 'long', comment: '上级ID' },
        { name: 'layer', type: 'int', comment: '层级' },
        { name: 'sort', type: 'int', comment: '序号' }
      ]
    },
    initDemoTable () {
      this.columns = [
        { name: 'name', type: 'string', comment: '名称' },
        { name: 'dept_id', type: 'long', comment: '部门ID' },
        { name: 'num', type: 'int', comment: '序号' },
        { name: 'score', type: 'double', comment: '分数' },
        { name: 'is_open', type: 'boolean', comment: '是否启用' },
        { name: 'describ', type: 'text', comment: '描述' },
        { name: 'sdate', type: 'date', comment: '日期' },
        { name: 'sdatetime', type: 'datetime', comment: '开始时间' },
        { name: 'stime', type: 'time', comment: '时间点' }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
  .table-column{
    td{
      padding:4px 10px 4px 0;
    }
  }
</style>
